/* General y variables */

* {
  margin: 3px;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

:root{
  --Gray:#394867;
  --DarkGray:#14274E;
  --Blue:#9BA4B4;
  --White:#F1F6F9;
}

/* Body */

body {
  background-color: var(--Gray);
  transition: background-color 0.5s ease;
 }

/* Header */

header {
  background-color: var(--DarkGray);
  border-radius: 25px;
  display: flex; 
  justify-content: space-around;
  align-items: center;
  padding: 10px;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
  position: sticky; top: 7px;
 }

 .Titulo {
  color: var(--Blue);
 }

 header button {
  border: none ;
  background: none;
  margin: 0 10px;
  color: var(--White);
 }

 header a {
  text-decoration: none;
  border: none ;
  background: none;
  margin: 0 10px;
  color: var(--White);
 }

 header h1 {
  color: var(--Blue);
 }	

 header a:hover {
  border-radius: 3px;
  cursor: pointer;
  border-radius: 10px;
 }
 
 header a:hover {
  border-radius: 3px;
  cursor: pointer;
  border-radius: 10px;
  color: var(--Blue);
 }

 /* General secciones secundarias */
 
 .TextoSeccion {
  text-align: center;
  margin-bottom: 5px;
  margin-left: 5px;
  color: var(--Blue);
 }

/* Seccion 1 */

 .section-1 {
  margin-bottom: 5px;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
  background-color: var(--DarkGray);
  border-radius: 25px;
  padding: 10px;
 }
 
 .section-1 h2 {
  color: var(--Blue);
  margin-top: 0;
 }

 .section-1 p {
  color: var(--White);
  margin-top: 10px;
 }
 
 .section-1 .text-small {
  color: var(--White);
  margin-top: 10px;
 }
 
 .section-1 button {
  align-self: flex-end;
  margin-left: 90%;
  border: none ;
  background: none;
  color: var(--White)
 }

 .section-1 a {
  text-decoration: none;
  border: none ;
  background: none;
  margin: 0 10px;
  color: var(--White);
 }

 .section-1 a:hover {
  border-radius: 3px;
  cursor: pointer;
  border-radius: 10px;
 }
 
 .section-1 a:hover {
  border-radius: 3px;
  cursor: pointer;
  border-radius: 10px;
  color: var(--Blue);
 }

 /* Seccion 2 */

 .section-2 {
  margin-bottom: 5px;
  display: flex; 
  justify-content: space-around;
  margin-right: 5px;
  margin-left: 5px;
 }
 
 .section-2 > div {
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
  background-color: var(--DarkGray);
  border-radius: 25px;
  padding-top: 0.1px;
  padding-bottom: 0.1px;
  padding-left: 4px;
  padding-right: 4px;
 }

 .section-2 div > a {
  text-decoration-line: none;
 }

 .section-2 h3 {
  color: var(--Blue);
  margin-top: 0;
 }

 .section-2 p {
  color: var(--White);
  margin-top: 0;  
 }

 .section-2 p > span {
  color: var(--Blue);
 }

 .section-2 button {
  align-self: flex-end;
  margin-left: 80%;
  border: none ;
  background: none;
  color: var(--White)
 }
 /* Seccion 3 */

 .section-3 {
  justify-content: space-between;
 }	

 .section-3 > div {
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
  background-color: var(--DarkGray);
  border-radius: 25px;
  padding-top: 0.1px;
  padding-bottom: 0.1px;
  padding-left: 5px;
  padding-right: 5px;
 }

 .section-3 div > a {
  text-decoration: none;
  border: none ;
  background: none;
 }

 .section-3 h3 {
  color: var(--Blue);
  text-align: left;
  margin-top: 0;
 }

 .section-3 h3> span {
  color: var(--Blue);
  align-self: right;
 }
 
 .section-3 p {
  color: var(--White);
  margin-top: 10px;
 }
 
 .section-3 button {
  align-self: flex-end;
  margin-left: 90%;
  border: none ;
  background: none;
  color: var(--White)
 }

 /* Footer */

 footer {
  background-color: var(--DarkGray);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
  border-radius: 25px;
 }

 footer p {
  align-self: center;
  color: var(--White);
  margin-top: 0;
 }